<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchFrom" class="demo-form-inline">
      <el-form-item label="limit">
        <el-select v-model="searchFrom.limit" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dailyMinList">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      class="table"
      header-cell-class-name="table-header"
    >
      <el-table-column label="代码" width="200">
        <template scope="scope">
          <el-link :underline="false" @click="openChart(scope.row.ts_code)">{{ scope.row.ts_code }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="min" label="min" sortable></el-table-column>
      <el-table-column prop="limit_days" label="limit_days"></el-table-column>
      <el-table-column prop="create_date" label="create">
        <template scope="scope">
          <span>{{ fromateDate(scope.row.create_date)}}</span>
        </template>
      </el-table-column>

    </el-table>

    <el-dialog
      title="图形"
      :visible.sync="dialogTableVisible"
      :modal="false"
      @opened="openChartLine"
      width="90%"
    >
      <div id="dialog-chart" style="width:100%;height: 600px;" />
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import echarts from "echarts";

export default {
  name: "dailyMin",
  data() {
    return {
      tableData: [],
      searchFrom: {
        limit: 90,
      },
      dialogTableVisible:false,
      options:[
        {"label":90,"value":90},
        {"label":60,"value":60},
        {"label":30,"value":30}
      ]
    }
  },
  computed: {

  },
  created() {
    this.dailyMinList()
  },
  methods: {
    dailyMinList() {
      axios.get('/tushare/dailyMinList', {
        params: {
          limit: this.searchFrom.limit,
        }
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.tableData = response.data.data
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    openChart(tsCode) {
      this.dialogTableVisible = true
      this.chartTsCode = tsCode
    },
    openChartLine() {
      let that = this;
      axios.get('/tushare/getDaily', {
        params: {
          tsCode: this.chartTsCode
        }
      })
        .then((response) => {
          if (response.data.code == 0) {
            let chart = echarts.init(document.getElementById('dialog-chart'))
            chart.off('click')
            var option

            option = {
              tooltip: {
                trigger: 'axis',
                position: function(pt) {
                  return [pt[0], '10%']
                }
              },
              title: {
                left: 'center',
                text: 'Large Area Chart'
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
              },
              yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                max:function (value) {
                  return value.max;
                },
                min:function (value) {
                  return value.min;
                },
              },
              dataZoom: [
                {
                  type: 'inside',
                  start: 0,
                  end: 100
                },
                {
                  start: 0,
                  end: 100
                }
              ],
              series: [
                {
                  name: 'Fake Data',
                  type: 'line',
                  sampling: 'lttb',
                  data: []
                }
              ]
            }

            const data = response.data.data
            for (var i in data) {
              option['series'][0]['data'].push(data[i]['close'])
              option['xAxis']['data'].push(data[i]['trade_date'])
            }

            chart.setOption(option)
            chart.on('click', function(params) {

              axios.get('/tushare/elgVol', {
                params: {
                  tsCode: that.chartTsCode,
                  tradeDate:params.name,
                  limit:1,
                }
              }).then((response) => {
                if(response.data.code == 0){
                  let buy = response.data.data.buy
                  let sell = response.data.data.sell
                  let jf = response.data.data.jf
                  let cf = response.data.data.cf

                  let buy_sm = response.data.data.buy_sm
                  let sell_sm = response.data.data.sell_sm
                  let jf_sm = response.data.data.jf_sm
                  let cf_sm = response.data.data.cf_sm

                  let buy_md = response.data.data.buy_md
                  let sell_md = response.data.data.sell_md
                  let jf_md = response.data.data.jf_md
                  let cf_md = response.data.data.cf_md

                  let buy_lg = response.data.data.buy_lg
                  let sell_lg = response.data.data.sell_lg
                  let jf_lg = response.data.data.jf_lg
                  let cf_lg = response.data.data.cf_lg

                  let html = "buy:"+buy+" sell:"+sell+" jf:"+jf+" cf:"+cf+"<br/><br/>";
                  html += "buySm:"+buy_sm+" sellSm:"+sell_sm+" jfSm:"+jf_sm+" cfSm:"+cf_sm+"<br/><br/>";
                  html += "buyMd:"+buy_md+" sellMd:"+sell_md+" jfMd:"+jf_md+" cfMd:"+cf_md+"<br/><br/>";
                  html += "buyLg:"+buy_lg+" sellLg:"+sell_lg+" jfLg:"+jf_lg+" cfLg:"+cf_lg+"<br/><br/>";
                  that.$message({
                    duration:0,
                    showClose: true,
                    message: html,
                    dangerouslyUseHTMLString:true,
                  });
                }
              })

            });
          }
        })
        .catch(function(error) {

        })
    },
    fromateDate(date){
      let arr =  date.split("T")
      return arr[0]
    }
  }
}
</script>

<style scoped>

</style>
